@(projectForm: Form[Resource], projects: List[Resource], configs: List[Resource])

@css = {
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/projects/add.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/projects/list.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("codemirror/codemirror.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("codemirror/theme/eclipse.css")" />
}

@scripts = {
	<script src="@routes.Assets.at("codemirror/codemirror.js")"></script>
	<script src="@routes.Assets.at("codemirror/mode/properties/properties.js")"></script>
	<script type="text/javascript">
		var propertiesEditor = null;
		var selectedConfigurationId = null;
		$(document).ready(function() {
			var textarea = document.getElementById('default-configuration');
			propertiesEditor = CodeMirror.fromTextArea(textarea, {
				lineNumbers: true,
				mode: 'properties',
				theme: 'eclipse'
			});
			
			$('#configuration-selection').change(function() {
				var selector = this;
				var configurationId = this.value;
				if(configurationId !== 'undefined' && parseInt(configurationId, 10) > 0) {
					jsRoutes.controllers.Configurations.getConfigContentRaw(configurationId).ajax().done(function(response) {
						if(typeof(propertiesEditor) !== 'undefined') {
							if(propertiesEditor.getValue() === '' || window.confirm('There is already a configuration, do you want to replace it with the selected configuration?') === true) {
								propertiesEditor.toTextArea();
								propertiesEditor = CodeMirror.fromTextArea(textarea, {
									lineNumbers: true,
									mode: 'properties',
									readOnly: true,
									theme: 'eclipse'
								});
								propertiesEditor.setValue(response.content);
								selectedConfigurationId = configurationId;
							} else {
								selector.value = selectedConfigurationId;
							}
						}
					});
				} else {
					propertiesEditor.toTextArea();
					propertiesEditor = CodeMirror.fromTextArea(textarea, {
						lineNumbers: true,
						mode: 'properties',
						theme: 'eclipse'
					});
					if(propertiesEditor.getValue() !== '' && !window.confirm('The configuration editor is not empty, do you want to keep the current content?') === true) {
						propertiesEditor.setValue('');
					}
					selectedConfigurationId = configurationId;
				}
			});
		});
	</script>
}

@main("Add project", css, scripts) {
	
    <div class="resource-form-2-column">
		@helper.form(action = routes.Projects.createProject()) { 
			
			<div class="column">
				@helper.inputText(projectForm("name"), '_label -> "Project name", '_help -> "A name is required")
			
				@helper.textarea(projectForm("description"), '_label -> "Description", 'class -> "input-description")
			</div>
			
			<div class="column">
				<dl class=" " id="description_field">
				    <dt>
				    	<label for="description">Default configuration</label>
				    	<div class="select-configuration-container">
							<select id="configuration-selection" name="default-configuration-selection">
								<option value="">Create new configuration</option>
								@for(config <- configs) {
									<option value="@config.getId()">@config.getName()</option>
								}
							</select>
							Select whether to create a new configuration or use an existing as default.
						</div>
				    </dt>
				    <dd>
				    	<textarea id="default-configuration" name="default-configuration">@projectForm("default-configuration").value()</textarea>
					</dd>
				</dl>
			</div>
			
			<div class="column-wide">
				<input type="submit" value="Create project" />
			</div>
			
		}
		
		<div class="clear-right"></div>
	</div>
	
	<fieldset>
		<legend>Projects</legend>
		
		@controls.list(projects)
	</fieldset>
	
}
